<!-- 基本信息 -->
<template>
  <a-Row :gutter="16">
    <a-Col :md="18" :xs="24">
      <div class="card-container">
        <a-tabs type="card" @change="tabsClick" v-model="tabKey">
          <a-tab-pane tab="基本信息" :key="1">
            <BasicInfo v-if="isData"></BasicInfo>
          </a-tab-pane>
          <a-tab-pane tab="编辑个人资料" :key="2">
            <EditInfo></EditInfo>
          </a-tab-pane>
          <a-tab-pane tab="修改密码" :key="3">
            <EditPass></EditPass>
          </a-tab-pane>
          <a-tab-pane tab="微信绑定" :key="4">
            <BindWechat></BindWechat>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-Col>
    <a-Col :md="6" :xs="24">
      <a-Card bordered class="mb20">
        <div slot="title">
          微信绑定
        </div>
        <div>
          <p>1、扫描二维码使用窑炉微信小程序登录进行绑定即可。</p>
          <p>2、关注公众平台后扫描二维码即可绑定微信。</p>
        </div>
      </a-Card>
    </a-Col>
  </a-Row>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import {
    BasicInfo,
    EditInfo,
    EditPass,
    BindWechat
  } from './components';
  export default {
    name: "message",
    components: {
      BasicInfo,
      EditInfo,
      EditPass,
      BindWechat,
    },
    data() {
      return {
        tabKey: 1,
        isData: true,
      }
    },
    mounted() {
      // this.userDetail()
      this.reload()
    },
    methods: {
      ...mapActions({
        changePass: 'Passport/changePass',//编辑
        userDetail: 'UserBasicInfo/userDetail',//基本信息
      }),
      reload(){
        this.isData = false
        this.$nextTick(()=>{
          this.isData = true
        })
      },
      tabsClick(){
        if(this.tabKey == 1) {
          this.reload()
        }
      }
    }
  }
</script>

<style scoped>
  >>>.ant-card .ant-card-head {
    background: #666;
    color: #fff;
  }
</style>
